<template>
  <div>子级组件：{{ money }} <button @click="buyPhone">买手机</button></div>
</template>

<script>
import { inject } from "vue";
export default {
  name: "ChildCom",
  setup() {
    // 2. 使用祖先组件提供的数据，使用inject函数获取数据
    // 参数：就是通过provide定义的数据名称 key
    const money = inject("money");
    // 只能使用数据不能修改数据，谁定义的数据谁负责修改（App.vue组件）
    // 这里需要修改App组件的money数据，调用App组件的changeMoney函数
    const changeMoney = inject("changeMoney");
    const buyPhone = () => {
      changeMoney(money.value - 3999);
    };
    return { money, buyPhone };
  },
};
</script>